<template>
	<view class="contain">
		<view class="footer">
			<view class="nav">
				<view class="menu">
					<u-tabs id="firstUtabs" :list="menulist" lineWidth="30"
						:activeStyle="{color: '#3a85f4', fontWeight: 'bold',}" :inactiveStyle="{color: '#606266',}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="menuclick"></u-tabs>
					<u-search id="search" v-model="requestSelectParams.workOrderId" height="20" @change="selectOne(0)"
						placeholder="输入工单号搜索" borderColor="#242424" :showAction="false">
					</u-search>
				</view>
				<!-- 				<view class="secondMenu">
					<u-tabs @click="secondMenuclick" id="secondUtabs" :list="childMenuList" lineWidth="20"
						:activeStyle="{color: '#303133', fontWeight: 'bold',fontSize:'small'}"
						:inactiveStyle="{color: '#606266',fontSize:'small'}"
						itemStyle=" padding-left: 8px; height: 34px;"></u-tabs>
				</view> -->
			</view>
			<!-- 未完成 -->
			<view class="xinghao footer-public" v-if="menu==0" v-for="(item,index) in lists1" :key="index">
				<view class="detail">
					<span>{{item.workOrderId}}</span>
					<span v-if="item.maId">外部：{{item.maId }}</span>
					<span>时间：{{item.createTime || ''}}</span>
					<span>联系：{{item.connectorName|| ''}}/{{item.connectorPhone||''}}</span>
					<span>店铺：{{item.storeId|| ''}}/{{item.storeName|| ''}}</span>
					<span>地点：{{item.storeAddress|| ''}}</span>
					<span v-if="item.faultDescribe!=null">故障：{{item.faultDescribe||''}}</span>
					<span>备注：{{item.remark==null?'':item.remark}}</span>
				</view>
				<view class="button">
					<u-button @click="buttonClick1(item,buttonlist1[index])" type="primary" size="mini" shape="circle">
						{{buttonlist1[index]}}
					</u-button>
				</view>
				<view class="state">
					{{item.workOrderStatusName[0]}}
				</view>
			</view>
			<!-- 已完成 -->
			<view class="xinghao footer-public" v-if="menu==1" v-for="(item,index) in lists2" :key="index">
				<view class="detail">
					<span>{{item.workOrderId}}</span>
					<span v-if="item.maId">外部：{{item.maId }}</span>
					<span>时间：{{item.createTime|| ''}}</span>
					<span>联系：{{item.connectorName|| ''}}/{{item.connectorPhone|| ''}}</span>
					<span>店铺：{{item.storeId|| ''}}/{{item.storeName|| ''}}</span>
					<span>地点：{{item.storeAddress|| ''}}</span>
					<span v-if="item.faultDescribe!=null">故障：{{item.faultDescribe||''}}</span>
					<span>备注：{{item.remark==null?'':item.remark}}</span>
				</view>
				<view class="button">
					<u-button type="primary" @click="buttonClick2(item,buttonlist2[index])" size="mini" shape="circle">
						{{buttonlist2[index]}}
					</u-button>
				</view>
				<view class="state">
					{{item.workOrderStatusName[0]}}
				</view>
			</view>
			<!-- 搜索 -->
			<view class="xinghao footer-public" v-if="menu==2" v-for="(item,index) in selectList" :key="index">
				<view class="detail">
					<span>{{item.workOrderId}}</span>
					<span v-if="item.maId">外部：{{item.maId }}</span>
					<span>时间：{{item.createTime|| ''}}</span>
					<span>联系：{{item.connectorName|| ''}}/{{item.connectorPhone|| ''}}</span>
					<span>店铺：{{item.storeId || ''}}/{{item.storeName|| ''}}</span>
					<span>地点：{{item.storeAddress|| ''}}</span>
					<span v-if="item.faultDescribe!=null">故障：{{item.faultDescribe||''}}</span>
					<span>备注：{{item.remark==null?'':item.remark}}</span>
				</view>
				<view class="button">
					<u-button type="primary"
						@click="this.recordMenu==0?buttonClick1(item,buttonlistSelect[index]):buttonClick2(item,buttonlistSelect[index])"
						size="mini" shape="circle">
						{{buttonlistSelect[index]}}
					</u-button>
				</view>
				<view class="state">
					{{item.workOrderStatusName[0]}}
				</view>
			</view>
		</view>
		<view class="bottomNav">
			<view class="bottomNav_content" @click="changeOrderType(1)">
				<view>
					<image :src="srcMa"></image>
				</view>
				<view>MA</view>
			</view>
			<view class="bottomNav_content" @click="changeOrderType(0)">
				<view>
					<image :src="srcOpen"></image>
				</view>
				<view>开店</view>
			</view>
		</view>
		<!-- 		<view class="tabbar">
			<tabbar value="0"></tabbar>
		</view> -->
		<!-- 预计到场时间 -->
		<u-datetime-picker @cancel="expectArriveTimeShow = false" @confirm="expectArriveTimeConfirm" title="请选择预计到场时间"
			:show="expectArriveTimeShow" :minDate="Date.now()" mode="datetime">
		</u-datetime-picker>
	</view>
</template>

<script>
	import Ma from '@/static/MA.png'
	import Ma1 from '@/static/MA1.png'
	import Oa from '@/static/开店.png'
	import Oa1 from '@/static/开店1.png'
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				requestParams1: {
					customer: "1",
					pageNum: 1,
					pageSize: 10,
					supplierUserId: undefined,
					workOrderTypeId: 1,
					workOrderStatus: [0, 5, 10, 15, 25, 20, 30, 31, 32, 34, 35, 36, 38, 39, 40, 16] //工单状态
				},
				requestParams2: {
					customer: "1",
					pageNum: 1,
					pageSize: 10,
					params: {},
					supplierUserId: undefined,
					workOrderTypeId: 1,
					workOrderStatus: [15, 100, 25]
				},
				lists1: [],
				lists2: [],
				expectItem: {
					workOrderId: null,
					expectArriveTime: null,
				},
				expectArriveTimeShow: false,
				userId: null,
				flag: 5,
				menu: 0,
				menulist: [{
						name: '未完成',
					},
					{
						name: '已完成',
					},
				],
				// actionStyle: {
				// 	background: 'linear-gradient(180deg, #01A2F0 0%, #76D8E4 100%)',
				// 	borderRadius: '10px',
				// 	width: '40px',
				// 	height: '23px',
				// 	fontSize: '14px',
				// 	fontWeight: '400',
				// 	color: '#FFFFFF',
				// 	border: 'none'
				// },

				// 搜索功能
				requestSelectParams: {
					customer: "1",
					workOrderId: '',
					pageNum: 1,
					pageSize: 10,
					supplierUserId: undefined,
					workOrderTypeId: 1,
					workOrderStatus: []
				},
				selectList: [],
				recordMenu: 0,
				srcMa: Ma1,
				srcOpen: Oa,
				// sbTakeOrders: {
				// 	engineerName: '',
				// 	engineerPhone: undefined,
				// 	expectArriveTime: this.changeTime(),
				// 	workOrderId: undefined,
				// 	supplierUserId: undefined,
				// 	workOrderStatus: 5,
				// 	pickOrderTime: '',
				// },
				// sbTake: {
				// 	show: false,
				// 	timeShow: false
				// },
				// 子导航栏
				childMenuList: [{
					name: '全部'
				}, {
					name: '阿迪达斯'
				}, {
					name: 'LVMH'
				}, {
					name: '历峰'
				}, {
					name: '星巴克'
				}, {
					name: '潘多拉'
				}, {
					name: '其他'
				}]
			};
		},
		onReachBottom() {
			if (this.menu == 0) {
				this.requestParams1.pageNum = this.requestParams1.pageNum + 1
				this.select1()
			} else if (this.menu == 1) {
				this.requestParams2.pageNum = this.requestParams2.pageNum + 1
				this.select2()
			} else if (this.menu == 2) {
				this.requestSelectParams.pageNum += 1
				this.selectOne(1)
			} else {
				console.log('查找');
			}

		},
		onLoad: async function() {
			uni.showLoading({
				title: '正在加载中'
			})
			// this.$store.dispatch('mafa/setFaultClass')
			// this.$store.dispatch('mafa/setFaultCode')
			// this.$store.dispatch('mafa/setSoluteCode')
			// this.$store.dispatch('mafa/setRepairType')
			this.requestParams1.supplierUserId = this.$store.state.supplierUserId;
			this.requestParams2.supplierUserId = this.$store.state.supplierUserId;
			this.requestSelectParams.supplierUserId = this.$store.state.supplierUserId;
			await this.mountSelect();
			// 	console.log(2);
			uni.hideLoading()
			// })
		},
		onShow: async function() {
			// await request({
			// 	url: "prod-api/getInfo",
			// 	method: "get",
			// }).then((res) => {
			// 	if (res.code < 300)
			// 		this.userId = res.data.user.userId
			// 	this.requestParams1.supplierUserId = res.data.user.userId
			// 	this.requestParams2.supplierUserId = res.data.user.userId
			// 	this.requestSelectParams.supplierUserId = res.data.user.userId
			// 	console.log("onShow lists1", this.lists1)
			// })
			// this.requestParams1.pageNum = 1
			// this.requestParams2.pageNum = 1
			// await this.mountSelect()
		},
		computed: {
			//未完成需要展示的
			buttonlist1() {
				let butn = []
				let workId = ''
				for (let i = 0; i < this.lists1.length; i++) {
					//同步button展示
					workId = this.lists1[i].workOrderId.slice(0, 3)
					if (workId == 'KOa') {
						if (this.lists1[i].workOrderStatusName == "未接单") {
							butn.push('接单')
						} else if (this.lists1[i].workOrderStatusName != "未接单") {
							butn.push('详情')
						} else {
							butn.push('错误')
						}
					} else {
						if (this.lists1[i].workOrderStatusName == "未接单") {
							butn.push('接单')
						} else if (this.lists1[i].workOrderStatusName == '进行中' && !this.lists1[i].expectArriveTime) {
							butn.push('预计')
						} else if (this.lists1[i].workOrderStatusName != "未接单" &&
							this.lists1[i].arriveTime == null) {
							butn.push('到场')
						} else if (this.lists1[i].workOrderStatusName != "未接单" &&
							this.lists1[i].arriveTime != null) {
							butn.push('详情')
						} else {
							butn.push('错误')
						}
					}

				}
				return butn
			},
			buttonlist2() {
				var butn = []
				for (let i = 0; i < this.lists2.length; i++) {
					butn.push("详情")
				}
				return butn
			},
			buttonlistSelect() {
				let butn = []
				let workId = ''
				for (let i = 0; i < this.selectList.length; i++) {
					//同步button展示
					workId = this.selectList[i].workOrderId.slice(0, 3);
					if (this.selectList[i].workOrderStatusName == "未接单") {
						butn.push('接单')
					} else if (this.selectList[i].workOrderStatusName == '进行中' && !this.lists1[i].expectArriveTime) {
						butn.push('预计')
					} else if (this.selectList[i].workOrderStatusName != "未接单" &&
						this.selectList[i].arriveTime == null) {
						butn.push('到场')
					} else if (this.selectList[i].workOrderStatusName != "未接单" &&
						this.selectList[i].arriveTime != null) {
						butn.push('详情')
					} else {
						butn.push('错误')
					}

				}
				return butn
			}
		},
		watch: {
			menu(newVal, oldVal) {
				if (oldVal == 0) {
					this.requestParams1.pageNum = 1
				} else if (oldVal == 1) {
					this.requestParams2.pageNum = 1
				} else {
					console.log('menu change.....');
				}
			}
		},
		methods: {
			// 改变工单类型
			async changeOrderType(value) {
				console.log('工单状态id:', value);
				this.requestParams1.workOrderTypeId = value;
				this.requestParams2.workOrderTypeId = value;
				this.requestSelectParams.workOrderTypeId = value;
				if (value == 1) {
					this.srcMa = Ma1;
					this.srcOpen = Oa;
				} else if (value == 0) {
					this.srcMa = Ma;
					this.srcOpen = Oa1;
				}
				await this.mountSelect();
			},
			changeTime(value) {
				if (value) {
					var time = new Date(value)
				} else {
					var time = new Date()
				}
				let year = time.getFullYear() + ''
				let month = (time.getMonth() + 1) + ''
				let date = time.getDate() + ''
				let h = time.getHours() + ''
				let m = time.getMinutes() + ''
				let s = time.getSeconds() + ''
				month = month > 9 ? month : '0' + month;
				date = date > 9 ? date : '0' + date;
				s = s > 9 ? s : '0' + s
				m = m > 9 ? m : '0' + m
				const tt = year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s;
				return tt
			},
			// 星巴克预计到场时间
			// sbExpectArriveTimeConfirm(evt) {
			// 	this.sbTakeOrders.expectArriveTime = this.changeTime(evt.value);
			// 	this.sbTake.timeShow = false;
			// },
			// 预定状态
			async expectArriveTimeConfirm(evt) {
				this.expectItem.expectArriveTime = this.changeTime(evt.value)
				this.arriveTimeShow = false
				let reqUrl = ''
				const workid = this.expectItem.workOrderId[0] + this.expectItem.workOrderId[1] + this.expectItem
					.workOrderId[2] + ''
				const expectItem = this.expectItem
				let req = {}
				switch (workid) {
					case 'KMl':
						reqUrl = 'lv-workOrder', req = {
							updateLvMaWorkOrderBo: expectItem
						};
						break;
					case 'KOl':
						reqUrl = 'lv-workOrder', req = {
							updateLvOpenWorkOrderBo: expectItem
						};
						break;
				}
				this.expectArriveTimeShow = false
				console.log(expectItem);
				uni.showModal({
					title: '提示',
					content: `预计到场时间为:${this.expectItem.expectArriveTime}`,
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定')
							request({
								url: `prod-api/system/${reqUrl}`,
								method: "put",
								data: req
							}).then((res) => {
								console.log('res:', res);
								this.mountSelect()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			menuclick(item) {
				console.log("menuindex", item.index)
				if (this.menu == 2) {
					this.recordMenu = item.index
					this.selectList.pageNum = 1
					this.selectOne(0)
				} else {
					this.menu = item.index
					this.mountSelect()
				}
				console.log(this.menu);
			},
			async mountSelect() {
				this.lists1 = []
				this.lists2 = []
				if (this.menu == 0) {
					await this.select1()
				} else {
					await this.select2()
				}
			},
			getTime() {
				var nowdate = new Date();
				var year = nowdate.getFullYear()
				var month = nowdate.getMonth() + 1
				var date = nowdate.getDate()
				var day = nowdate.getDay()
				var h = nowdate.getHours()
				var m = nowdate.getMinutes()
				var s = nowdate.getSeconds()
				var nowtime = year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s;
				return nowtime
			},
			buttonClick1(item, buttonText) {
				var nowtime = this.getTime()
				//区分不同工单
				var workid = item.workOrderId[0] + item.workOrderId[1] + item.workOrderId[2]
				console.log("workid", workid);
				if (buttonText == "接单") {
					if (workid == "KOl") {
						this.lvopen(item, nowtime, "接单")
					} else if (workid == "KCl") {
						this.lvclose(item, nowtime, "接单")
					} else if (workid == "KMl") {
						this.lvma(item, nowtime, "接单")
					}

				} else if (buttonText == '预计') {
					this.expectArriveTimeShow = true;
					this.expectItem.workOrderId = item.workOrderId
				} else if (buttonText == "到场") {
					//点击到场
					if (workid == "KOl") {
						this.lvopen(item, nowtime, "到场")
					} else if (workid == "KCl") {
						this.lvclose(item, nowtime, "到场")
					} else if (workid == "KMl") {
						this.lvma(item, nowtime, "到场")
					}
				} else if (buttonText == "详情") {
					if (workid == "KMl") {
						uni.navigateTo({
							url: "lvma?workOrderId=" + item.workOrderId + "&canchange=" + (item
								.workOrderStatusName === "进行中" || item.workOrderStatusName === "驳回单")
						});
					}
				}
			},
			buttonClick2() {
				uni.showToast({
					title: '暂不支持小程序显示',
					icon: 'error',
					duration: 2000 //持续的时间
				})
			},
			async select1() {
				console.log("select1执行了")
				uni.showLoading({
					title: '正在加载中'
				})
				await request({
					url: "prod-api/system/all/list",
					method: "post",
					data: this.requestParams1
				}).then((res) => {
					uni.hideLoading()
					if (res.code < 300) {
						if (res.rows.length == 0) {
							this.requestParams1.pageNum -= 1
						}
						this.lists1 = this.lists1.concat(res.rows)
						console.log('lists11请求为：', this.lists1);

					}
				})
			},
			async select2() {
				uni.showLoading({
					title: '正在加载中'
				})
				await request({
					url: "prod-api/system/all/list",
					method: "post",
					data: this.requestParams2
				}).then((res) => {
					uni.hideLoading()
					if (res.code < 300) {
						if (res.rows.length == 0) {
							this.requestParams2.pageNum -= 1
						}
						this.lists2 = this.lists2.concat(res.rows)
						console.log('lists2请求为：', this.lists2);

					}
				})
			},
			async selectall1() {
				uni.showLoading({
					title: '正在加载中'
				})
				this.lists1.length = 0
				console.log('request1为：', this.requestParams1);
				await request({
					url: "prod-api/system/all/list",
					method: "post",
					data: this.requestParams1
				}).then((res) => {
					uni.hideLoading()
					if (res.code < 300) {
						this.lists1 = res.rows
						console.log('lists1请求为：', this.lists1);

					}
				})
			},
			async selectall2() {
				uni.showLoading({
					title: '正在加载中'
				})
				this.lists2.length = 0
				await request({
					url: "prod-api/system/all/list",
					method: "post",
					data: this.requestParams2
				}).then((res) => {
					uni.hideLoading()
					if (res.code < 300) {
						this.lists2 = res.rows
						console.log('lists2请求为：', this.lists2);

					}
				})
			},
			async lvma(item, nowtime, resType) {
				if (resType == "接单") {
					var resdata = {
						workOrderId: item.workOrderId,
						supplierUserId: this.userId,
						workOrderStatus: 5,
						pickOrderTime: nowtime
					}
				} else if (resType == "到场") {
					var resdata = {
						workOrderId: item.workOrderId,
						arriveTime: nowtime
					}
				}
				uni.showLoading({
					title: '正在加载中'
				})
				await request({
					url: "prod-api/system/lv-workOrder",
					method: "put",
					data: {
						updateLvMaWorkOrderBo: resdata
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code < 300) {

						this.mountSelect()
					}
				})
			},
			async lvopen(item, nowtime, resType) {
				if (resType == "接单") {
					var resdata = {
						workOrderId: item.workOrderId,
						supplierUserId: this.userId,
						workOrderStatus: 5,
						pickOrderTime: nowtime
					}
				} else if (resType == "到场") {
					var resdata = {
						workOrderId: item.workOrderId,
						arriveTime: nowtime
					}
				}
				uni.showLoading({
					title: '正在加载中'
				})
				await request({
					url: "prod-api/system/lv-workOrder",
					method: "put",
					data: {
						updateLvOpenWorkOrderBo: resdata
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code < 300) {

						this.mountSelect()
					}
				})
			},
			async lvclose(item, nowtime, resType) {
				if (resType == "接单") {
					var resdata = {
						workOrderId: item.workOrderId,
						supplierUserId: this.userId,
						workOrderStatus: 5,
						pickOrderTime: nowtime
					}
				} else if (resType == "到场") {
					var resdata = {
						workOrderId: item.workOrderId,
						arriveTime: nowtime
					}
				}
				uni.showLoading({
					title: '正在加载中'
				})
				await request({
					url: "prod-api/system/lv-workOrder",
					method: "put",
					data: {
						updateRgCloseWorkOrderBo: resdata
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code < 300) {

						this.mountSelect()
					}
				})
			},

			//到场请求
			// 单项模糊搜索
			async selectOne(stady) {
				console.log('点击搜索');
				console.log("menu的值为:", this.menu);
				console.log('  为：', this.requestSelectParams.workOrderId);
				if (!stady) {
					this.requestSelectParams.pageNum = 1
				}
				if (this.requestSelectParams.workOrderId == '') {
					this.selectList.length = 0
					this.menu = this.recordMenu
					this.selectList.pageNum = 1
					if (this.menu == 0) {
						this.selectall1()
					} else if (this.menu == 1) {
						this.selectall2()
					} else {
						console.log('错误');
					}
				} else {
					if (this.menu == 0) {
						this.recordMenu = this.menu
						this.requestSelectParams.customer = this.requestParams1.customer
						this.requestSelectParams.length = 0
						this.requestSelectParams.workOrderStatus = [...this.requestParams1.workOrderStatus]
					} else if (this.menu == 1) {
						this.recordMenu = this.menu
						this.requestSelectParams.customer = this.requestParams2.customer
						this.requestSelectParams.length = 0
						this.requestSelectParams.workOrderStatus = [...this.requestParams2.workOrderStatus]
					} else if (this.menu == 2) {
						if (this.recordMenu == 0) {
							this.requestSelectParams.customer = this.requestParams1.customer
							this.requestSelectParams.length = 0
							this.requestSelectParams.workOrderStatus = [...this.requestParams1.workOrderStatus]
						} else if (this.recordMenu == 1) {
							this.requestSelectParams.customer = this.requestParams2.customer
							this.requestSelectParams.length = 0
							this.requestSelectParams.workOrderStatus = [...this.requestParams2.workOrderStatus]
						}
					} else {
						console.log('不属于查询');
					}
					this.menu = 2
					uni.showLoading({
						title: '正在加载中'
					})
					console.log(this.requestSelectParams);
					const res = await request({
						headers: {
							"Content-Type": "application/json"
						},
						url: "prod-api/system/all/list",
						method: 'post',
						data: this.requestSelectParams
					})
					console.log('suxingyu1返回结果，', res.rows);
					uni.hideLoading()
					console.log('styde:', stady);
					if (stady) {
						this.selectList = this.selectList.concat(res.rows)
						uni.hideLoading()
					} else {
						this.selectList.length = 0
						this.selectList = res.rows
						uni.hideLoading()
					}
					console.log('selectList:', this.selectList);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgb(225, 225, 225);

		.title {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 10rpx;
			font-size: 40rpx;
			font-weight: 600;
		}

		.footer-public {
			width: 700upx;
			background-color: white;
			margin: 0 25upx;
			border-radius: 30upx 30upx 30upx 30upx;

		}

		.footer {
			padding-bottom: 100upx;
			background-color: rgb(225, 225, 225);

			.center {
				display: flex;
				justify-content: space-around;
				height: 200upx;
				color: white;
				background-color: rgb(82, 144, 255);

				.left {
					font-size: 45rpx;
					display: flex;
					flex-direction: column;
					margin: auto 0;
				}

				.right {
					margin: auto 0;
				}
			}

			.menu {
				font-size: 40upx;
				margin-top: 30upx;
				// -background-color: lightblue;
				display: flex;
				justify-content: center;

				// background-color: red;
				#firstUtabs {
					display: inline-block;
					width: 150px;
				}

				#search {
					display: inline-block;
					float: right;
					width: 100px;
				}
			}

			.xinghao {
				margin: 50upx 25upx;
				box-sizing: border-box;
				position: relative;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); //设置两层阴影


				.detail {
					display: flex;
					flex-direction: column;
					font-weight: 500;
					font-size: 30upx;
					// height: 200upx;
					justify-content: space-around;
					margin: 50upx 25upx;
					padding: 30upx 0;
				}

				.menu {
					margin-top: 30upx;
				}

				.button {
					position: absolute;
					bottom: 30upx;
					right: 80upx;
					width: 36rpx;
				}

				.state {
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-family: "NSimSun", cursive, serif, sans-serif;
					font-size: 40upx;
					font-weight: bold;
					color: #ed9922;
					background-color: #417CA9;
					box-sizing: border-box;
					border-radius: 50%;
				}
			}
		}

		.tabbar {
			position: fixed;
			bottom: 30upx;
		}
	}

	.nav {
		position: sticky;
		top: 0;
		// #ifdef H5 */
		// top: 44px;
		// /* #endif */
		/* #ifndef H5

		/* #endif */
		z-index: 999;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
	}

	.bottomNav {
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: space-around;
		overflow: hidden;
		background-color: #ffffff;
		width: 100vw;
		height: 10vh;
		box-sizing: border-box;

		.bottomNav_content {
			text-align: center;

			view image {
				max-width: 36px;
				max-height: 33px;
				color: gray;
			}
		}

		.bottomNav_content:link {}

		.bottomNav_content:active {
			background-color: #0055ff;
		}

		.bottomNav_content:visited {
			background-color: #aa00ff;
		}
	}
</style>
